import '@umijs/max';
import React, {useEffect, useRef, useState} from 'react';
import {
  ProFormInstance,
  StepsForm,
  ProFormText,
  ProFormTextArea
} from "@ant-design/pro-components";
import {message, Modal, UploadProps} from "antd";
import Dragger from "antd/es/upload/Dragger";
import {InboxOutlined} from "@ant-design/icons";


export type Props = {
  values: API.Api;
  onCancel: () => void;
  onSubmit: (values: API.Api, file: File | null) => Promise<void>;
  visible: boolean;
};
const UpdateModal: React.FC<Props> = (props) => {
  const {values, visible, onCancel, onSubmit} = props;
  const formRef = useRef<ProFormInstance>();
  const [uploadedFile, setUploadedFile] = useState<File | null>(null);
  const uploadProps: UploadProps = {

    onChange: (info) => {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        const file = info.fileList[0].originFileObj;
        setUploadedFile(file as File);
        message.success(`${info.file.name} 文件上传成功`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 文件上传失败`);
      }
    }
  };
  useEffect(() => {
    if (formRef) {
      formRef.current?.setFieldsValue(values);
    }
  }, [values])
  return (
    <StepsForm
      stepsProps={{
        size: 'small',
      }}
      stepsFormRender={(dom, submitter) => {
        return (
          <Modal
            width={640}
            bodyStyle={{padding: '32px 40px 48px'}}
            destroyOnClose
            title={'接口配置'}
            open={visible}
            footer={submitter}
            onCancel={() => onCancel?.()}
          >
            {dom}
          </Modal>
        );
      }}
      onFinish={async (values) => {
        onSubmit?.(values, uploadedFile);
      }}
    >
      <StepsForm.StepForm
        formRef={formRef}
        name={'basic'}
        title={'接口信息'}
        initialValues={{
          ...values
        }}
      >
        <ProFormText
          name="name"
          width="md"
          label="接口名称"
          tooltip="最长为 24 位"
          placeholder="请输入接口名称"
          rules={[{required: true}]}
        />

        <ProFormTextArea
          name="description"
          label="接口描述"
          width="lg"
          placeholder="请输入接口描述"
        />

        <ProFormText
          name="url"
          width="md"
          label="url"
          placeholder="请输入url"
          rules={[{required: true}]}
        />
        <ProFormText
          name="method"
          width="md"
          label="请求方法"
          placeholder="请输入请求方法"
          rules={[{required: true}]}
        />

        <ProFormTextArea
          name="requestParams"
          label="请求参数示例"
          width="lg"
          placeholder="请输入接口请求参数示例"
          rules={[{required: true}]}
        />

        <ProFormTextArea
          name="requestHeader"
          label="请求头"
          width="lg"
          placeholder="请输入接口请求头"
        />

        <ProFormTextArea
          name="responseHeader"
          label="响应头"
          width="lg"
          placeholder="请输入接口响应头"
        />
      </StepsForm.StepForm>
      <StepsForm.StepForm
        title={'JAR包上传'}
        name='file'
      >
        <Dragger {...uploadProps} maxCount={1} name='file' accept={'.jar'}>
          <p className="upload-drag-icon">
            <InboxOutlined/>
          </p>
          <p className="upload-text">点击或拖拽文件到此区域上传</p>
          <p className="upload-hint">
            支持单个或批量上传。（目前仅支持jar文件）
          </p>
        </Dragger>
      </StepsForm.StepForm>
    </StepsForm>
  );
};
export default UpdateModal;
